<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">系统管理</span>
			<span class="h2">系统管理员</span>
      <el-button type="primary" size="small" @click="add()">添加系统管理员</el-button>
		</div>
		<div class="contens">
			<!-- <div class="title clearfix" style="margin-bottom: 20px;">
				<div>
					<span class="titles">系统管理员列表</span>
					<el-button type="primary" size="small" @click="addauto()">添加角色</el-button>
				</div>
			</div> -->
			<div class="clearfix" style="margin-bottom: 15px;">
				<div class="fl">
					<label for="">工程项目:</label>
					<el-select v-model="project" filterable clearable placeholder="请选择" @change='change1()'>
						<el-option v-for="item in gczmList" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<label for="">行政区域:</label>
					<el-cascader clearable :options="regions" filterable v-model="regio" separator='-' @active-item-change="handleItemChange" change-on-select @change="cascader1()"></el-cascader>
					<label for="">用户类型:</label>
					<el-select v-model="types" placeholder="请选择" filterable clearable>
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="fr">
					<el-input v-model="inputs" placeholder="请输入姓名" style="width:217px;"></el-input>
					<el-button type="primary" @click="filter()">查询</el-button>
				</div>
			</div>
			<el-table :data="userData" border style="width: 100%">
				<el-table-column type="index" width="60" align='center'>
				</el-table-column>
				<el-table-column prop="Login" label="用户名" align='center'>
				</el-table-column>
				<el-table-column prop="CNName" label="姓名" align='center'>
				</el-table-column>
				<el-table-column prop="Tel" label="电话" align='center'>
				</el-table-column>
				<el-table-column prop="UserTypeStr" label="账户类型" align='center'>
				</el-table-column>
				<el-table-column prop="RegionStr" label="行政区域" align='center' show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="StateStr" label="状态" align='center'>
				</el-table-column>
				<el-table-column label="操作" align='center' s>
					<template slot-scope="scope">
						<el-dropdown trigger="click">
							<span class="el-dropdown-link"><el-button type="primary">操&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作<i class="el-icon-arrow-down el-icon--right"></i></el-button></span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>
									<el-button size="small" type="success" @click="modify(scope.row.ID,scope.row.Login,scope.row.CNName,scope.row.Tel,scope.row.ProjectID,scope.row.UserType,scope.row.RegionID,scope.row.OtherEdit,scope.row.OtherView,scope.row.SpecialAuth)">修&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;改</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="danger" @click="deleteRow(scope.row.ID)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
								</el-dropdown-item>
								<el-dropdown-item v-if="scope.row.State==2">
									<el-button type="primary" size="small" @click="fnClose(scope.row.ID)">关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闭</el-button>
								</el-dropdown-item>
								<el-dropdown-item v-if="scope.row.State==3">
									<el-button type="primary" size="small" @click="fnClose(scope.row.ID)">开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;启</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<el-button size="small" type="info" @click="Reset(scope.row.ID)">重置密码</el-button>
								</el-dropdown-item>
								<el-dropdown-item>
									<!-- <el-button size="small" type="warning" @click.native.prevent="setrole(scope.row.Login)">权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限</el-button> -->
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
		<div class="Popup">
		<!--添加用户-->
		<el-dialog title="添加系统管理员" :visible.sync="adduse" width="500px">
			<div>
				<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
					<el-form-item label="用户名">
						<el-input v-model="formLabelAlign.login"></el-input>
					</el-form-item>
					<el-form-item label="姓名">
						<el-input v-model="formLabelAlign.cName"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formLabelAlign.pass" type='password'></el-input>
					</el-form-item>
					<el-form-item label="验证密码">
						<el-input v-model="formLabelAlign.rpass" type='password'></el-input>
					</el-form-item>
					<el-form-item label="联系电话">
						<el-input v-model="formLabelAlign.tel"></el-input>
					</el-form-item>
					<el-form-item label="项目列表">
						<el-select v-model="project1" filterable placeholder="请选择" clearable @change='chang2()'>
							<el-option v-for="item in gczmList" :key="item.ID" :label="item.Name" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="行政区域">
						<el-cascader clearable :options="regions" filterable v-model="selectedOptions3" separator='-' @active-item-change="handleItemChange" change-on-select @change="cascader()"></el-cascader>
					</el-form-item>
					<el-form-item label="上传头像">
						<div>
							<el-upload class="avatar-uploader sys" :action=this.host :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="imageUrl" :src="Host+imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="adduse = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="addUser()" size="small">确 定</el-button>
		  </span>
		</el-dialog>

		<!--修改操作员-->
		<el-dialog title="修改系统管理员" :visible.sync="modiy" width="500px">
			<el-form ref="formLabelAlign" :model="formLabelAlign" label-width="120px">
				<el-form-item label="项目列表">
					<el-select v-model="project2" filterable placeholder="请选择" @change='chang3()'>
						<el-option v-for="item in gczmList" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="行政区域">
					<el-cascader clearable :options="regions" filterable v-model="selectedOptions3" separator='-' @active-item-change="handleItemChange" change-on-select @change="cascader()"></el-cascader>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="formLabelAlign.login" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="formLabelAlign.cName"></el-input>
				</el-form-item>
				<el-form-item label="联系电话">
					<el-input v-model="formLabelAlign.tel"></el-input>
				</el-form-item>
				<el-form-item label="用户类型">
					<el-select v-model="uType" placeholder="请选择" clearable>
						<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="查看他人数据" v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
					<el-checkbox v-model="checked"></el-checkbox>
				</el-form-item>
				<el-form-item label="修改他人数据" v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
					<el-checkbox v-model="checked1"></el-checkbox>
				</el-form-item>
				<el-form-item label="特殊权限"  v-show="projectShow=='00000000-0000-0000-0000-000000000000'">
					<el-checkbox v-model="checked2"></el-checkbox>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="modiy = false">取 消</el-button>
				<el-button type="primary" @click="updateuser()">确 定</el-button>
			</span>
		</el-dialog>
		<!--重置密码-->
		<el-dialog title="重置密码" :visible.sync="resetMark" width="400px">
			<el-form ref="formLabelAlign" :model="formLabelAlign" label-width="80px">
				<el-form-item label="新密码">
					<el-input v-model="formLabelAlign.pass" type='password'></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input v-model="formLabelAlign.rpass" type='password'></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetMark = false">取 消</el-button>
				<el-button type="primary" @click="setting()">确 定</el-button>
			</span>
		</el-dialog>
		<!--新建角色-->
		<el-dialog title="新建角色" :visible.sync="Mark2">
			<el-row :gutter="20">
				<el-col :span="4" style="text-align: center; line-height: 36px;"><span>角色名：</span></el-col>
				<el-col :span="16">
					<el-input v-model="role" placeholder="请输入内容"></el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addRole()">添加</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="7">
					<div class="qxleft">
						<h3 class="rowl">角色</h3>
						<div style="height: 300px;overflow:auto;" id="jiaose">
							<button type="button" class="list-group-item" :value="item.ID" ref="name" v-for="(item,index) in roleList" :key="index" @click="fnJur(item.ID)">{{item.RoleName}}</button>
						</div>
					</div>
				</el-col>
				<el-col :span="17" style="overflow: auto; height: 341px;">
					<div class="panel">
						<div class="qxtop">
							<h3 style="float: left;">权限配置</h3>
							<el-button type="danger" style="float: right;" @click="delUse()">删除</el-button>
						</div>
						<div class="qxtype">
							<div v-for="(items,index) in authlist" :key="index">
								<div class="qxtype-title">{{items.GroupName}}</div>
								<div>
									<div class="checkbox c-checkbox needsclick">
										<el-checkbox-group v-model="item.isExists" v-for="item in items.ItemList" :key="item.id" class="divlist">
											<el-checkbox :label="item.ID" name="check" :value="item.ID" :checked="item.isExists">{{item.ItemName}}</el-checkbox>
										</el-checkbox-group>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button @click="Mark()">取 消</el-button>
				<el-button type="primary" @click="autl()">确 定</el-button>
			</span>
		</el-dialog>
		<!--权限配置-->
		<el-dialog title="权限配置" :visible.sync="setroles">
			<el-form ref="qxpz" :model="qxpz" label-width="100px">
				<el-form-item label="操作员：">
					<el-input v-model="qxpz.login" placeholder="" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div class="qxpzbox">
				<p class="qx-title">角色</p>
				<div>
					<p class="qx-title" v-for="(item,index) in roleList" :key="index">
						<el-checkbox-group v-model="item.isExists">
							<el-checkbox :label="item.ID" name="row" :value="item.ID" :checked="item.isExists">{{item.RoleName}}</el-checkbox>
						</el-checkbox-group>
					</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="fnCancel()">取 消</el-button>
				<el-button type="primary" @click="fnSubRole()">确 定</el-button>
			</span>
		</el-dialog>
		</div>
	</div>
</template>
<script></script>
<script>
import api from "../../axios/api";
export default {
  name: "Operator",
  data() {
    return {
      xpic: "",
      Host: api.host, //主机
      imageUrl: "", //图片路径
      host: "", //上传地址
      types: "", //用户类型
      loading: true,
      projectShow:'',
      typeList: [
        {
          value: "1",
          label: "管理员"
        },
        {
          value: "2",
          label: "镇征拆"
        },
        {
          value: "3",
          label: "镇财务"
        },
        {
          value: "4",
          label: "县征拆"
        },
        {
          value: "5",
          label: "县财务"
        },
        {
          value: "6",
          label: "业主征拆"
        },
        {
          value: "7",
          label: "业主财务"
        },
        {
          value: "8",
          label: "领导通道"
        }
      ], //用户类型
      gczmList: [], //项目列表
      project1: "", //项目id
      project2: "",
      project: "", //项目id
      resetMark: false,
      selectedOptions3: [], //行政区域id
      regio: [], //行政区域
      RegionID: "", //计算过后的行政区域id
      Regis: "", //搜索计算后的行政区域
      regions: [], //行政区域
      authlist: [],
      roleList: [], //角色列表
      role: "", //角色
      qxlist: [], //权限列表
      qxpz: {
        login: ""
      }, //权限操作员
      Mark2: false, //角色弹框
      setroles: false, //权限弹框
      modiy: false, //修改弹框
      adduse: false, //添加用户弹框
      userData: [], //操作员列表
      inputs: "", //搜索
      labelPosition: "right",
      formLabelAlign: {
        login: "",
        cName: "",
        pass: "",
        rpass: "",
        tel: ""
      },
      pages: 1, //翻页
      total: 1, //条数
      id: "", //公共id
      checked: true,
      checked1: false,
      checked2: false,
      typeList: [
        {
          value: "1",
          label: "管理员"
        },
        {
          value: "2",
          label: "镇征拆"
        },
        {
          value: "3",
          label: "镇财务"
        },
        {
          value: "4",
          label: "县征拆"
        },
        {
          value: "5",
          label: "县财务"
        },
        {
          value: "6",
          label: "业主征拆"
        },
        {
          value: "7",
          label: "业主财务"
        },
        {
          value: "8",
          label: "领导通道"
        }
      ], //类型
      uType: "7"
    };
  },
  created() {
    this.projectShow=sessionStorage.ProjectID;
    this.host = api.files;

    this.zList();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.loading = false;
      this.imageUrl = res.Data.filePaht.substring(2, res.Data.filePaht.length);
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    onError() {
      this.loading = false;
      this.$message.error("上传失败");
    },
    beforeAvatarUpload(file) {
      this.loading = true;
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.common.errorTip("上传图片必须是JPG/GIF/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    //获取工程项目
    zList() {
      this.$post(api.getlistde)
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.gczmList = response.Data;
               this.project = response.Data[0].ID;
            this.getlist();
               this.anonymousget(this.project)
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //切换的工程项目
    //			changes(){
    //				this.regions = []
    //				this.anonymousget(this.project)
    //			},
    //获取行政区域
    anonymousget(ids) {
      this.$get(api.anonymousget + "/" + ids).then(response => {
        if (response.data.isOK == true && response.data.state == 200) {
          for (var i = 0; i < response.data.Data.length; i++) {
            this.regions.push({
              label: response.data.Data[i].RegionName,
              value: response.data.Data[i].ID,
              ParentID: response.data.Data[i].ParentID
            });
          }
          this.regions = this.$toTree(this.regions);
        } else {
          this.$message.error(response.data.msg);
        }
      });
    },
    //通过id获取行政区域
    change1() {
      this.Regis = "";
      this.regions = [];
      if (this.project) {
        this.anonymousget(this.project);
      }
    },
    chang2() {
      this.RegionID = "";
      this.regions = [];
      if (this.project1) {
        this.anonymousget(this.project1);
      }
    },
    chang3() {
      this.RegionID = "";
      this.regions = [];
      if (this.project2) {
        this.anonymousget(this.project2);
      }
    },
    //获取提交的行政区域id
    cascader() {
      this.RegionID = "";
      this.RegionID = this.selectedOptions3[this.selectedOptions3.length - 1];
    },
    cascader1() {
      this.Regis = "";
      this.Regis = this.regio[this.regio.length - 1];
    },
    //翻页
    handleCurrentChange(val) {
      this.pages = val;
      this.loading = true;
      this.$post(api.getlist, {
        Para: {
          ProjectID: this.project,
          RegionID: Number(this.Regis),
          QueryKeyWord: this.inputs,
          UserType: this.types
        },
        PageSize: 10,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.userData = response.Data.Data;
            this.total = response.Data.Items ? response.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //查询
    filter() {
      this.loading = true;
      this.pages = 1;
      this.$post(api.getlist, {
        Para: {
          ProjectID: this.project,
          RegionID: Number(this.Regis),
          QueryKeyWord: this.inputs,
          UserType: this.types
        },
        PageSize: 10,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.userData = response.Data.Data;
            this.total = response.Data.Items ? response.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //获取操作员列表
    getlist() {
      this.loading = true;
      this.$post(api.getlist, {
        Para: {
          ProjectID: this.project,
          RegionID: 0,
          QueryKeyWord: "",
          UserType: 0
        },
        PageSize: 10,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.loading = false;
            this.userData = response.Data.Data;
            this.total = response.Data.Items ? response.Data.Items : 1;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    handleItemChange(val) {},
    //添加弹框
    add() {
      this.adduse = true;
      this.selectedOptions3 = [];
      this.formLabelAlign.login = "";
      this.formLabelAlign.cName = "";
      this.formLabelAlign.pass = "";
      this.formLabelAlign.rpass = "";
      this.formLabelAlign.tel = "";
      this.imageUrl = "";
      this.project1 = this.gczmList[0] ? this.gczmList[0].ID : "";
      this.chang2();
      this.RegionID = "";
    },
    //添加用户
    addUser() {
      if (
        this.formLabelAlign.login == "" ||
        this.formLabelAlign.cName == "" ||
        this.formLabelAlign.tel == "" ||
        this.formLabelAlign.pass == "" ||
        this.formLabelAlign.rpass == "" ||
        this.project1 == ""
      ) {
        this.loading = false;
        this.$message.error("不能为空");
        return;
      }
      if (this.formLabelAlign.pass !== this.formLabelAlign.rpass) {
        this.loading = false;
        this.$message.error("两次密码不一样");
        return;
      }
      this.loading = true;
      this.$post(api.add, {
        Login: this.formLabelAlign.login,
        CNName: this.formLabelAlign.cName,
        HeadIMG: this.imageUrl,
        Pwd: this.$md5(this.formLabelAlign.pass),
        Tel: this.formLabelAlign.tel,
        ProjectID: this.project1,
        RegionID: this.RegionID,
        UserType: 1,
        State: 2
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.loading = false;
            this.pages = 1;
            this.getlist();
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
      this.adduse = false;
    },
    //修改
    modify(
      id,
      login,
      CNName,
      tel,
      proid,
      usetupe,
      rid,
      OterEdit,
      OtherView,
      SpecialAuth
    ) {
      this.id = id;
      this.RegionID = "";
      this.formLabelAlign.login = login;
      this.formLabelAlign.cName = CNName;
      this.formLabelAlign.tel = tel;
      this.project2 = proid;
      this.chang3();
      this.uType = usetupe.toString();
      this.RegionID = rid;
      this.anonychildby(this.RegionID);
      this.checked = OtherView;
      this.checked1 = OterEdit;
      this.checked2 = SpecialAuth;
      this.modiy = true;
    },
    //通过指定id获取区域数据
    anonychildby(id) {
      this.selectedOptions3 = [];
      this.$get(api.anonychildby + "/" + id).then(response => {
        if (response.data.isOK == true && response.data.state == 200) {
          if (!response.data.Data) {
            this.selectedOptions3.push(id);
            return false;
          }
          for (let i = response.data.Data.length - 1; i >= 0; i--) {
            this.selectedOptions3.push(response.data.Data[i].ID);
          }
          this.selectedOptions3.push(id);
        }
      });
    },
    //确认修改
    updateuser() {
      if (
        this.formLabelAlign.cName == "" ||
        this.formLabelAlign.tel == "" ||
        this.project2 == ""
      ) {
        this.loading = false;
        this.$message.error("不能为空");
        return false;
      }
      if (this.selectedOptions3 == "") {
        this.$message.error("不能为空");
        return false;
      }
      this.loading = true;
      this.$post(api.updatett, {
        ID: this.id,
        RegionID: this.RegionID,
        ProjectID: this.project2,
        UserType: this.uType,
        CNName: this.formLabelAlign.cName,
        Tel: this.formLabelAlign.tel,
        OtherView: this.checked,
        OterEdit: this.checked1,
        SpecialAuth: this.checked2
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.$message({
              message: "修改成功",
              type: "success"
            });
            this.loading = false;
            this.pages = 1;
            this.getlist();
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
      this.modiy = false;
    },
    //开启或关闭
    fnClose(id) {
      this.loading = true;
      this.$get(api.closes + "/" + id)
        .then(response => {
          if (response.data.isOK == true && response.data.state == 200) {
            this.loading = false;
            this.getlist(1, "", 0, "", 0);
          } else {
            this.loading = false;
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //删除
    deleteRow(id) {
      this.$confirm("将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          this.$get(api.deluser + "/" + id)
            .then(response => {
              if (response.data.isOK == true && response.data.state == 200) {
                this.loading = false;
                this.pages = 1;
                this.getlist();
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              } else {
                this.loading = false;
                this.$message.error(response.data.msg);
              }
            })
            .catch(err => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //权限
    setrole(login) {
      this.qxpz.login = login;
      this.setroles = true;
    },
    fnSubRole() {
      this.setroles = false;
    },
    //添加角色弹框
    addauto() {
      this.role = "";
      this.Mark2 = true;
    },
    //添加角色
    addRole() {
      this.roleList.push({
        RoleName: this.role
      });
      this.role = "";
    },
    //点击角色显示权限列表
    fnJur() {},
    //删除角色
    delUse() {},
    autl() {
      this.Mark2 = false;
    },
    Mark() {
      this.Mark2 = false;
    },
    fnCancel() {
      this.setroles = false;
    },
    //单选
    change() {},
    //重置密码弹框
    Reset(id) {
      this.id = id;
      this.formLabelAlign.pass = "";
      this.formLabelAlign.rpass = "";
      this.resetMark = true;
    },
    //确认重置密码
    setting() {
      if (this.formLabelAlign.pass == "" || this.formLabelAlign.rpass == "") {
        this.$message.error("密码不能为空");
        return;
      }
      if (this.formLabelAlign.pass !== this.formLabelAlign.rpass) {
        this.$message.error("两次密码不一样");
        return;
      }
      this.loading = true;
      this.$post(api.resr, {
        ID: this.id,
        Pwd: this.$md5(this.formLabelAlign.pass)
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.$message({
              message: "重置成功",
              type: "success"
            });
            this.loading = false;
            this.pages = 1;
            this.getlist();
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(err => {
          this.loading = false;
        });
      this.resetMark = false;
    }
  }
};
</script>

<style>
.rowl {
  color: #fff;
  background-color: #5d9cec;
  border-color: #cfdbe2;
  padding: 10px 0;
  text-indent: 15px;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 0px;
  text-align: left;
  text-indent: 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #e4eaec;
  width: 100%;
  cursor: pointer;
}

.qxleft {
  border: 1px solid #cfdbe2;
}

.panel {
  border: 1px solid #cfdbe2;
  padding: 10px;
  box-sizing: border-box;
}

.qxtop {
  height: 36px;
  line-height: 36px;
  margin-bottom: 15px;
}

.qxtype {
  border: 1px solid #cfdbe2;
  border-color: #cfdbe2;
  border-top-width: 3px;
  margin-bottom: 21px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  padding: 10px;
}

.qxtype-title {
  color: #444;
  background-color: #fff;
  border-color: #cfdbe2;
  border-bottom: 0;
  font-size: 14px;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.qxtype > div {
  padding: 15px;
  margin-bottom: 21px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  border-top-width: 3px;
  border-color: #cfdbe2;
}

.el-dialog__footer {
  text-align: center;
}

.act {
  background-color: #b9c4d1 !important;
}

.qxpzbox {
  max-height: 240px;
  overflow: auto;
  border: 1px solid #cfdbe2;
  border-top-width: 3px;
  border-color: #cfdbe2;
  margin-bottom: 21px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  padding: 15px;
}

.qx-title {
  margin-bottom: 15px;
}

.check {
  vertical-align: middle;
  margin-right: 5px;
  width: 15px;
  height: 15px;
}
.Popup .el-cascader {
  width: 100% !important;
}
.Popup .el-select {
  width: 100% !important;
}
.sys .avatar-uploader-icon {
  line-height: 120px !important;
}
</style>